import React from 'react'
import axios from 'axios';
import { useEffect } from 'react';
import { useState } from 'react';
import {useParams, useSearchParams, useLocation, useNavigate} from 'react-router-dom';

export default function HeroDetail() {
  //声明状态
  let [hero, setHero] = useState({});
  //1. params  获取 url 中的 id 参数
  // let {id} = useParams();
  //2. query   获取 querystring 的 id 参数
  // let [search] = useSearchParams();
  // let id = search.get('id');
  //3. state  获取 state 中的 id 参数   
  // let location = useLocation(); 
  // let id = location.state.id;
  //解构赋值
  let {state: {id}} = useLocation(); 
  //获取跳转的函数
  let navigate = useNavigate();

  useEffect(() => {
    //发送请求
    axios.get(`http://api.xiaohigh.com/heros/${id}`)
    .then(response => {
      //更新英雄的状态
      setHero(response.data);
    });
  }, [])

  return (
    <div className='container' style={{paddingTop: 20}}>
      <div className="col-xs-3" style={{background: '#eee', paddingTop: 20}}>
        <button className="btn btn-primary" onClick={() => {
          navigate(-1); // history.go(-1)
        }}>返回</button>
        <h3>{hero.name}</h3>
        <p>类型: {hero.type}</p>
        <p>技能展示:</p>
        <div className="row skills" style={{display: 'flex'}}>
          {
            hero.skills 
            ? 
            hero.skills.map(item => {
              return <div className="col-xs-3" key={item.name}>
                  <img width="100%" src={"http://cdn.xiaohigh.com" + item.img} alt="" />
                  <p className="text-center" style={{fontSize: 12}}>{item.name}</p>
                </div>
            }) 
            : 
            ''
          }
        </div>
      </div>
      <div className="col-xs-9">
        <img width="100%" src={hero.big_image ? "http://cdn.xiaohigh.com" + hero.big_image: ''} alt="" />
        <hr />
        <p dangerouslySetInnerHTML={{__html: hero.intro}}></p>
      </div >
    </div >
  )
}
